﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png">


    <!-- Required css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img class="logo-img-lg" src="assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img class="logo-img-sm" src="assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">导航栏</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> 主面板 </span>
                            <span class="badge badge-success badge-pill float-right mr-3">最新</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="dashboard-project.html">项目</a></li>
                            <li><a href="dashboard-sales.html">销售</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> 小组件 </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="widgets-simple.html">统计</a></li>
                            <li><a href="widgets-data.html">数据</a></li>
                            <li><a href="widgets-chart.html">图表</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">UI 组件</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-box"></i>
                            <span> Bootstrap </span>
                            <span class="badge badge-primary-lighten badge-pill float-right mr-3">b4+</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="ui-alert.html">Alert</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-breadcumb.html">Breadcumb</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-collapse.html">Collapsed</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-progress.html">Progress</a></li>
                            <li><a href="ui-spinners.html">Spinners</a></li>
                            <li><a href="ui-tabs.html">Tabs</a></li>
                            <li><a href="ui-toast.html">Toast</a></li>
                            <li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-layers"></i>
                            <span> Advance UI Kit </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="aui-alerts.html">Alert</a></li>
                            <li><a href="aui-calendar.html">Calendar</a></li>
                            <li><a href="aui-dragula.html">Dragula</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-document"></i>
                            <span> Forms </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="form-elements.html">Basic Elements</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-fileuploads.html">File Uploads</a></li>
                            <li class="menu-item">
                                <a href="javascript: void(0);" aria-expanded="false">Editors<span class="menu-sub-icon"></span></a>
                                <ul class="menu-level-third" aria-expanded="false">
                                    <li><a href="form-editors-summernote.html">Summernote</a></li>
                                    <li><a href="form-editors-simplemde.html">Simplemde</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-feather"></i>
                            <span> Icons </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="icons-drip.html">Drip</a></li>
                            <li><a href="icons-feather.html">Feather</a></li>
                            <li><a href="icons-ion.html">Ion</a></li>
                            <li><a href="icon-linear.html">Linear</a></li>
                            <li><a href="icons-material.html">Material</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Charts & Maps</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-pie-chart"></i>
                            <span> Charts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="charts-apex.html">Apex</a></li>
                            <li><a href="charts-chartjs.html">Chartjs</a></li>
                            <li><a href="charts-knob.html">Knob</a></li>
                            <li><a href="charts-morris.html">Morris</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-map"></i>
                            <span> Maps </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="maps-google.html">Google Maps</a></li>
                            <li><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Tables</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-list"></i>
                            <span> Tables </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="tables-basic.html">Bootstrap Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Pages</li>
                    <li class="menu-item">
                        <a href="pages-starter.html" class="menu-link">
                            <i class="feather icon-monitor"></i>
                            <span> Sample Page </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-profile.html" class="menu-link">
                            <i class="feather icon-user"></i>
                            <span> User Profile </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-invoice.html" class="menu-link">
                            <i class="feather icon-printer"></i>
                            <span> Invoice </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-faq.html" class="menu-link">
                            <i class="feather icon-help-circle"></i>
                            <span> FAQ </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-wifi-off"></i>
                            <span> Maintenance </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-maintenance.html">Maintenance</a></li>
                            <li><a href="pages-comming-soon.html">Comming soon</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-lock"></i>
                            <span> Authentication </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-login-2.html">Login 2</a></li>
                            <li><a href="pages-login-img.html">Login 3</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-register-2.html">Register 2</a></li>
                            <li><a href="pages-register-img.html">Register 3</a></li>
                            <li><a href="pages-logout.html">Logout</a></li>
                            <li><a href="pages-logout-2.html">Logout 2</a></li>
                            <li><a href="pages-logout-img.html">Logout 3</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-recoverpw-2.html">Recover Password 2</a></li>
                            <li><a href="pages-recoverpw-img.html">Recover Password 3</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-lock-screen-2.html">Lock Screen 2</a></li>
                            <li><a href="pages-lock-screen-img.html">Lock Screen 3</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="apps-tasks.html" class="menu-link">
                            <i class="feather icon-clipboard"></i>
                            <span> Tasks </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="icon feather icon-gitlab"></i>
                            <span> Projects </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="apps-projects-list.html">List</a></li>
                            <li><a href="apps-projects-details.html">Details</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-browser"></i>
                            <span> Layouts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="layouts-horizontal.html">Horizontal</a></li>
                            <li><a href="layouts-light-sidenav.html">Light Sidenav</a></li>
                            <li><a href="layouts-dark.html">layouts dark</a></li>
                            <li><a href="layouts-collapsed.html">Collapsed Sidenav</a></li>
                            <li><a href="layouts-boxed-vertical.html">Boxed Vertical</a></li>
                            <li><a href="layouts-boxed-horizontal.html">Boxed Horizontal</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->


        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item active">Widgets</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Widgets</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <!-- Data widget starts -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Orders Overview</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive-md">
                                        <table class="table table-hover mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Company</th>
                                                    <th>Owner</th>
                                                    <th>Target</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-facebook btn-icon text-white" title="Facebook">
                                                                <i class="mdi mdi-facebook"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-4.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Jacob Doe</h4>
                                                                    <p class="mb-0">Jacob_Doe@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>33%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-warning">Pending</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-twitter btn-icon text-white" title="Twitter">
                                                                <i class="mdi mdi-twitter"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-1.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Mandy Erle</h4>
                                                                    <p class="mb-0">Mandy@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>56%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="width: 56%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-success">Success</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-dribbble btn-icon text-white" title="Dribbble">
                                                                <i class="mdi mdi-dribbble"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-4.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Adella Galen</h4>
                                                                    <p class="mb-0">Adella@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>12%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="width: 12%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-primary">In progress</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-pinterest btn-icon text-white" title="Pinterest">
                                                                <i class="mdi mdi-pinterest"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-2.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Napoleon Stacey</h4>
                                                                    <p class="mb-0">Napoleon@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>65%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger">NEW</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-linkedin btn-icon text-white" title="Linkedin">
                                                                <i class="mdi mdi-linkedin"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-3.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Napoleon Stacey</h4>
                                                                    <p class="mb-0">Napoleon@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>45%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger">NEW</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-googleplus btn-icon text-white" title="Google plus">
                                                                <i class="mdi mdi-google-plus"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-4.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Alex William</h4>
                                                                    <p class="mb-0">Alex@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>75%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-warning">Pending</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div>
                                                            <a data-toggle="tooltip" href="#" class="btn btn-behance btn-icon text-white" title="Behance">
                                                                <i class="mdi mdi-behance"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="media align-items-center more-user-details">
                                                                <img src="assets/images/users/avatar-5.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                                <div class="media-body">
                                                                    <h4 class="mt-0 mb-1">Napoleon Stacey</h4>
                                                                    <p class="mb-0">Napoleon@example.com</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <span>65%</span>
                                                            <div class="progress mt-1">
                                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger">NEW</span>
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8 col-md-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Recent Sales</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover  mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="border-top-0">Product</th>
                                                    <th class="border-top-0">Customers</th>
                                                    <th class="border-top-0">Categories</th>
                                                    <th class="border-top-0">Popularity</th>
                                                    <th class="border-top-0">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="">iPone X</td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Kimberly Simmons" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-4.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Willie Torres" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-5.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Rebecca Jones" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-3.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-primary">+8</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger badge-pill">Mobile</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1200.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="">iPad</td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Kimberly Simmons" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Willie Torres" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-1.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-primary">+5</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-success badge-pill">Tablet</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                                            <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1190.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="">OnePlus</td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Kimberly Simmons" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-1.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Willie Torres" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Rebecca Jones" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-3.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-primary">+3</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger badge-pill">Mobile</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 999.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="">ZenPad</td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Kimberly Simmons" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-3.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Willie Torres" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-4.jpg" alt="Avatar">
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-success badge-pill">Tablet</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                                            <div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1150.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="">Pixel 2</td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Kimberly Simmons" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-3.jpg" alt="Avatar">
                                                            </li>
                                                            <li data-toggle="tooltip" data-popup="tooltip-custom" title="Willie Torres" class="list-inline-item mr-n3">
                                                                <img class="w-user-img rounded-circle" src="assets/images/users/avatar-4.jpg" alt="Avatar">
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger badge-pill">Mobile</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1180.00</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-12">
                            <div class="card ui-activity-card update-card">
                                <div class="card-body">
                                    <div class="btn-group dropdown float-right">
                                        <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                    <h5 class="mt-0 mb-3">What’s New</h5>
                                    <div class="slimscroll pt-1" style="max-height: 285px;">
                                        <div class="ui-activity-list">
                                            <div class="row pt-3 pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <img src="assets/images/users/avatar-1.jpg" alt="user image" class="img-radius align-top update-icon">
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Your Manager Posted.</h5>
                                                    <p class="mb-0">Jonny michel</p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="feather icon-briefcase bg-danger update-icon"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">You have 3 pending Task.</h5>
                                                    <p class="mb-0">Hemilton</p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="feather icon-check f-w-600 bg-primary update-icon"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">New Order Received.</h5>
                                                    <p class="mb-0">Hemilton</p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="feather icon-briefcase bg-warning update-icon"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">You have 3 pending Task.</h5>
                                                    <p class="mb-0">Hemilton</p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <img src="assets/images/users/avatar-4.jpg" alt="user image" class="img-radius align-top update-icon">
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Your Manager Posted.</h5>
                                                    <p class="mb-0">Jonny michel</p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="feather icon-check f-w-600 bg-success update-icon"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">New Order Received.</h5>
                                                    <p class="mb-0">Shirley Hoe</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="feather icon-briefcase bg-danger update-icon"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">You have 2 pending Task.</h5>
                                                    <p class="mb-0">James Alexander</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-12">
                            <div class="card ui-activity-card">
                                <div class="card-body">
                                    <div class="btn-group dropdown float-right">
                                        <button type="button" class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                            <a href="javascript:" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                    <h5 class="mt-0 mb-3">Latest Activity</h5>
                                    <div class="slimscroll pt-1" style="max-height: 305px;">
                                        <div class="ui-activity-list">
                                            <div class="row py-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-success update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Devlopment</h5>
                                                    <p class="mb-0">Lorem ipsum dolor sit amet, <a href="#!" class="text-c-green"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-warning update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Showcases</h5>
                                                    <p class="mb-0">Lorem dolor sit amet, <a href="#!" class="text-c-blue"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-primary update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Devlopment & Update</h5>
                                                    <p class="mb-0">Lorem ipsum dolor sit amet, <a href="#!" class="text-c-blue"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-success update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Showcases</h5>
                                                    <p class="mb-0">Lorem dolor sit amet, <a href="#!" class="text-c-blue"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-danger update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Testimonial</h5>
                                                    <p class="mb-0">Lorem ipsum dolor sit ipsum <a href="#!" class="text-c-green"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-warning update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Testing</h5>
                                                    <p class="mb-0">Lorem dolor sit amet, <a href="#!" class="text-c-blue"> More</a></p>
                                                </div>
                                            </div>
                                            <div class="row pb-3">
                                                <div class="col-auto text-right update-meta">
                                                    <i class="bg-primary update-icon ring"></i>
                                                </div>
                                                <div class="col pl-2">
                                                    <h5 class="m-0">Miscellaneous</h5>
                                                    <p class="mb-0">Lorem ipsum dolor sit ipsum <a href="#!" class="text-c-green"> More</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8 col-md-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Recent Transactions</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="border-top-0">Status</th>
                                                    <th class="border-top-0">Invoice#</th>
                                                    <th class="border-top-0">Customer Name</th>
                                                    <th class="border-top-0">Products</th>
                                                    <th class="border-top-0">Categories</th>
                                                    <th class="border-top-0">Shipping</th>
                                                    <th class="border-top-0">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class=""><i class="la la-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
                                                    <td class=""><a href="#">INV-001001</a></td>
                                                    <td class="">
                                                        <span data-toggle="tooltip" data-popup="tooltip-custom" title="Elizabeth W.">
                                                            <img class="prod-img" src="assets/images/users/avatar-4.jpg" alt="avatar">
                                                        </span>
                                                    </td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-4.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-5.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-2.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-success">+1</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-primary badge-pill">Food</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 ">
                                                            <div class="progress-bar bgdanger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1200.00</td>
                                                </tr>
                                                <tr>
                                                    <td class=""><i class="la la-dot-circle-o danger font-medium-1 mr-1"></i> Declined</td>
                                                    <td class=""><a href="#">INV-001002</a></td>
                                                    <td class="">
                                                        <span data-toggle="tooltip" data-popup="tooltip-custom" title="Doris R.">
                                                            <img class="prod-img" src="assets/images/users/avatar-1.jpg" alt="avatar">
                                                        </span>
                                                    </td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-1.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-5.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-success">+2</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-warning badge-pill">Electronics</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 ">
                                                            <div class="progress-bar bgwarning" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 1850.00</td>
                                                </tr>
                                                <tr>
                                                    <td class=""><i class="la la-dot-circle-o warning font-medium-1 mr-1"></i> Pending</td>
                                                    <td class=""><a href="#">INV-001003</a></td>
                                                    <td class="">
                                                        <span data-toggle="tooltip" data-popup="tooltip-custom" title="Megan S.">
                                                            <img class="prod-img" src="assets/images/users/avatar-2.jpg" alt="avatar">
                                                        </span>
                                                    </td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-2.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-3.jpg" alt="Avatar">
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-success badge-pill">Groceries</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 ">
                                                            <div class="progress-bar bgsuccess" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 3200.00</td>
                                                </tr>
                                                <tr>
                                                    <td class=""><i class="la la-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
                                                    <td class=""><a href="#">INV-001004</a></td>
                                                    <td class="">
                                                        <span data-toggle="tooltip" data-popup="tooltip-custom" title="Andrew D.">
                                                            <img class="prod-img" src="assets/images/users/avatar-3.jpg" alt="avatar">
                                                        </span>
                                                    </td>
                                                    <td class=" p-1">
                                                        <ul class="list-inline cust-img-list m-0">
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-2.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <img class="prod-img" src="assets/images/bg/bg-5.jpg" alt="Avatar">
                                                            </li>
                                                            <li class="list-inline-item mr-n3">
                                                                <span class="badge badge-success">+1</span>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-info badge-pill">Apparels</span>
                                                    </td>
                                                    <td>
                                                        <div class="progress progress-sm mt-1 mb-0 ">
                                                            <div class="progress-bar bginfo" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </td>
                                                    <td class="">$ 4500.00</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Invoice List</h5>
                                </div>
                                <div class="slimscroll" style="max-height: 425px;">
                                    <div class="card-body p-0">
                                        <div class="table-responsive border-top mb-0">
                                            <table class="table table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>Invoice ID</th>
                                                        <th>Category</th>
                                                        <th>Purchase Date</th>
                                                        <th>Price</th>
                                                        <th>Due Date</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>#INV-<span>348</span></td>
                                                        <td>Resturant</td>
                                                        <td>07-12-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$89</td>
                                                        <td>17-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>186</span></td>
                                                        <td>Rela Estate</td>
                                                        <td>02-12-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$14,276</td>
                                                        <td>14-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>831</span></td>
                                                        <td>Jobs</td>
                                                        <td>30-11-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$25,000</td>
                                                        <td>04-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>672</span></td>
                                                        <td>Education</td>
                                                        <td>25-18-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$50.00</td>
                                                        <td>07-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>428</span></td>
                                                        <td>Electornics</td>
                                                        <td>24-11-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$99.99</td>
                                                        <td>11-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>543</span></td>
                                                        <td>Vechicle</td>
                                                        <td>22-11-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$145</td>
                                                        <td>12-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>#INV-<span>986</span></td>
                                                        <td>Pet &amp; Animals</td>
                                                        <td>18-11-2019</td>
                                                        <td class="font-weight-semibold fs-16 num-font">$378</td>
                                                        <td>07-12-2019</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-6">
                            <div class="card ui-feed">
                                <div class="card-body">
                                    <div class="dropdown float-right">
                                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="mdi mdi-dots-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                    <h5 class="header-title mb-0">Feeds</h5>
                                </div>
                                <div class="slimscroll" style="max-height: 420px;">
                                    <div class="card-body pt-0">
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-bell badge-warning-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 3 pending tasks.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>Just Now</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-shopping-cart badge-primary-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>New order received</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>30 min ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-file-text badge-danger-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 3 pending tasks.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>38 min ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-bell badge-success-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 4 tasks Done.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>1 hours ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-file-text badge-info-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 2 pending tasks.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>2 hours ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-shopping-cart badge-warning-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>New order received</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>4 hours ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-shopping-cart badge-success-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>Order Delivery Done</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>4.5 hours ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row mb-3 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-file-text badge-danger-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 5 pending tasks.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>1 day ago</small>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row m-b-0 align-items-center">
                                            <div class="col-auto pr-0">
                                                <i class="feather icon-bell badge-success-lighten feed-icon"></i>
                                            </div>
                                            <div class="col">
                                                <a href="#!" class="text-body">
                                                    <h5>You have 4 tasks Done.</h5>
                                                    <small class="text-muted"><i class="icon feather icon-clock mr-2"></i>2 day ago</small>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="float-right">
                                        <a href="" class="float-right btn btn-danger btn-sm" id="btn-archive">Delete</a>
                                    </div>
                                    <h5 class="header-title mb-3">Todo</h5>
                                    <div class="todoapp">
                                        <ul class="list-group list-group-flush slimscroll todo-list" style="max-height: 330px" id="todo-list"></ul>
                                        <div class="row">
                                            <div class="col">
                                                <h5 id="todo-message"><span id="todo-remaining"></span> of <span id="todo-total"></span> remaining</h5>
                                            </div>
                                        </div>
                                        <form name="todo-form" id="todo-form" class="needs-validation" novalidate>
                                            <div class="row">
                                                <div class="col">
                                                    <input type="text" id="todo-input-text" name="todo-input-text" class="form-control" placeholder="Add new todo" required>
                                                    <div class="invalid-feedback">
                                                        Enter Text
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <button class="btn-primary btn-md btn-block btn " type="submit" id="todo-btn-submit">Submit</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Employee Details</h5>
                                </div>
                                <div class="slimscroll" style="max-height: 425px;">
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Position</th>
                                                        <th>Office</th>
                                                        <th>Age</th>
                                                        <th>Start date</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Tiger Nixon</td>
                                                        <td>System Architect</td>
                                                        <td>Edinburgh</td>
                                                        <td>61</td>
                                                        <td>2011/04/25</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Garrett Winters</td>
                                                        <td>Accountant</td>
                                                        <td>Tokyo</td>
                                                        <td>63</td>
                                                        <td>2011/07/25</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Ashton Cox</td>
                                                        <td>Junior Technical Author</td>
                                                        <td>San Francisco</td>
                                                        <td>66</td>
                                                        <td>2009/01/12</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Cedric Kelly</td>
                                                        <td>Senior Javascript Developer</td>
                                                        <td>Edinburgh</td>
                                                        <td>22</td>
                                                        <td>2012/03/29</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Airi Satou</td>
                                                        <td>Accountant</td>
                                                        <td>Tokyo</td>
                                                        <td>33</td>
                                                        <td>2008/11/28</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Brielle Williamson</td>
                                                        <td>Integration Specialist</td>
                                                        <td>New York</td>
                                                        <td>61</td>
                                                        <td>2012/12/02</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Herrod Chandler</td>
                                                        <td>Sales Assistant</td>
                                                        <td>San Francisco</td>
                                                        <td>59</td>
                                                        <td>2012/08/06</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Rhona Davidson</td>
                                                        <td>Integration Specialist</td>
                                                        <td>Tokyo</td>
                                                        <td>55</td>
                                                        <td>2010/10/14</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Colleen Hurst</td>
                                                        <td>Javascript Developer</td>
                                                        <td>San Francisco</td>
                                                        <td>39</td>
                                                        <td>2009/09/15</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Sonya Frost</td>
                                                        <td>Software Engineer</td>
                                                        <td>Edinburgh</td>
                                                        <td>23</td>
                                                        <td>2008/12/13</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Jena Gaines</td>
                                                        <td>Office Manager</td>
                                                        <td>London</td>
                                                        <td>30</td>
                                                        <td>2008/12/19</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Quinn Flynn</td>
                                                        <td>Support Lead</td>
                                                        <td>Edinburgh</td>
                                                        <td>22</td>
                                                        <td>2013/03/03</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Charde Marshall</td>
                                                        <td>Regional Director</td>
                                                        <td>San Francisco</td>
                                                        <td>36</td>
                                                        <td>2008/10/16</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Haley Kennedy</td>
                                                        <td>Senior Marketing Designer</td>
                                                        <td>London</td>
                                                        <td>43</td>
                                                        <td>2012/12/18</td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View details"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>User Accounts</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Profile</th>
                                                    <th>Email Address</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <img src="assets/images/users/avatar-4.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                            <div class="media-body">
                                                                <h4 class="mt-0 mb-1">Jacob</h4>
                                                                <p class="mb-0">UI/UX Designer</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>jacob@demo.com</td>
                                                    <td><span class="badge badge-success">Approved</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <img src="assets/images/users/avatar-2.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                            <div class="media-body">
                                                                <h4 class="mt-0 mb-1">Charlotte</h4>
                                                                <p class="mb-0">UX Designer</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>charlotte@demo.com</td>
                                                    <td><span class="badge badge-warning">Suspended</span></td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <img src="assets/images/users/avatar-1.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                            <div class="media-body">
                                                                <h4 class="mt-0 mb-1">Grayson</h4>
                                                                <p class="mb-0">Tester</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>grayson@demo.com</td>
                                                    <td><span class="badge badge-danger">Blocked</span></td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <img src="assets/images/users/avatar-3.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                            <div class="media-body">
                                                                <h4 class="mt-0 mb-1">Amelia</h4>
                                                                <p class="mb-0">MVC Develper</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>amelia@demo.com</td>
                                                    <td><span class="badge badge-success">Approved</span></td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <img src="assets/images/users/avatar-5.jpg" class=" rounded-circle ui-w-50 mr-3" alt="Avtar image">
                                                            <div class="media-body">
                                                                <h4 class="mt-0 mb-1">Michael</h4>
                                                                <p class="mb-0">UI/UX Designer</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>michael@demo.com</td>
                                                    <td><span class="badge badge-info">Pending</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="dropdown float-right">
                                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="mdi mdi-dots-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-refresh-cw text-muted"></i> &nbsp; Reload</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                    <h5 class="header-title mb-3">Messages</h5>
                                    <div class="slimscroll" style="max-height: 400px;">
                                        <div class="inbox-widget">
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-2.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Tomaslau</p>
                                                <p class="inbox-item-text">I've finished it! See you so...</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-3.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Stillnotdavid</p>
                                                <p class="inbox-item-text">This theme is awesome!</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Kurafire</p>
                                                <p class="inbox-item-text">Nice to meet you</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>

                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-5.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Shahedk</p>
                                                <p class="inbox-item-text">Hey! there I'm available...</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-3.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Stillnotdavid</p>
                                                <p class="inbox-item-text">This theme is awesome!</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Kurafire</p>
                                                <p class="inbox-item-text">Nice to meet you</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                            <div class="inbox-item">
                                                <div class="inbox-item-img"><img src="assets/images/users/avatar-6.jpg" class="rounded-circle" alt=""></div>
                                                <p class="inbox-item-author">Adhamdannaway</p>
                                                <p class="inbox-item-text">This theme is awesome!</p>
                                                <p class="inbox-item-date">
                                                    <a href="#" class="btn btn-sm btn-link text-info font-13"> Reply </a>
                                                </p>
                                            </div>
                                        </div> <!-- end inbox-widget -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Product Summary</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-custom mb-0">
                                            <thead>
                                                <tr>
                                                    <th>#No</th>
                                                    <th>Client Name</th>
                                                    <th>Product ID</th>
                                                    <th>Product</th>
                                                    <th>Product Cost</th>
                                                    <th>Payment Mode</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>#01</td>
                                                    <td>Sean Black</td>
                                                    <td>PRO12345</td>
                                                    <td>Mi LED Smart TV 4A 80</td>
                                                    <td>$14,500</td>
                                                    <td>Online Payment</td>
                                                    <td><span class="badge badge-success">Delivered</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#02</td>
                                                    <td>Evan Rees</td>
                                                    <td>PRO8765</td>
                                                    <td>Thomson R9 122cm (48 inch) Full HD LED TV </td>
                                                    <td>$30,000</td>
                                                    <td>Cash on delivered</td>
                                                    <td><span class="badge badge-primary">Add Cart</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#03</td>
                                                    <td>David Wallace</td>
                                                    <td>PRO54321</td>
                                                    <td>Vu 80cm (32 inch) HD Ready LED TV</td>
                                                    <td>$13,200</td>
                                                    <td>Online Payment</td>
                                                    <td><span class="badge badge-warning">Pending</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#04</td>
                                                    <td>Julia Bower</td>
                                                    <td>PRO97654</td>
                                                    <td>Micromax 81cm (32 inch) HD Ready LED TV</td>
                                                    <td>$15,100</td>
                                                    <td>Cash on delivered</td>
                                                    <td><span class="badge badge-secondary">Delivering</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#05</td>
                                                    <td>Kevin James</td>
                                                    <td>PRO4532</td>
                                                    <td>HP 200 Mouse &amp; Wireless Laptop Keyboard </td>
                                                    <td>$5,987</td>
                                                    <td>Online Payment</td>
                                                    <td><span class="badge badge-danger">Shipped</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#06</td>
                                                    <td>Theresa Wright</td>
                                                    <td>PRO6789</td>
                                                    <td>Digisol DG-HR3400 Router </td>
                                                    <td>$11,987</td>
                                                    <td>Cash on delivered</td>
                                                    <td><span class="badge badge-success">Delivering</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#07</td>
                                                    <td>Sebastian Black</td>
                                                    <td>PRO4567</td>
                                                    <td>Dell WM118 Wireless Optical Mouse</td>
                                                    <td>$4,700</td>
                                                    <td>Online Payment</td>
                                                    <td><span class="badge badge-secondary">Add to Cart</span></td>
                                                </tr>
                                                <tr>
                                                    <td>#08</td>
                                                    <td>Kevin Glover</td>
                                                    <td>PRO32156</td>
                                                    <td>Dell 16 inch Laptop Backpack </td>
                                                    <td>$678</td>
                                                    <td>Cash On delivered</td>
                                                    <td><span class="badge badge-cyan">Delivered</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Visitor details</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table card-table">
                                            <thead>
                                                <tr>
                                                    <th class="w-1">ID</th>
                                                    <th>Visitor Name</th>
                                                    <th>Gender</th>
                                                    <th>Status</th>
                                                    <th>Phone Number</th>
                                                    <th>Date</th>
                                                    <th>Loaction</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span class="text-muted num-font">#6754</span></td>
                                                    <td>Adam Berry</td>
                                                    <td>Male</td>
                                                    <td><span class="badge badge-pill badge-primary">Normal</span></td>
                                                    <td>+1 23 456 9876</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>10-10-2019</td>
                                                    <td>USA</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="text-muted num-font">#5643</span></td>
                                                    <td>Kylie Peake</td>
                                                    <td>Female</td>
                                                    <td><span class="badge badge-pill badge-success">Unusual</span></td>
                                                    <td>+0 45 678 9966</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>08-10-2019</td>
                                                    <td>Arizona</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="text-muted num-font num-font">#8765</span></td>
                                                    <td>Katherine Hart</td>
                                                    <td>Female</td>
                                                    <td><span class="badge badge-pill badge-warning">Normal</span></td>
                                                    <td>+1 98 675 4325</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>07-10-2019</td>
                                                    <td>Montana</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="text-muted num-font">#4563</span></td>
                                                    <td>Sarah Jones</td>
                                                    <td>Male</td>
                                                    <td><span class="badge badge-pill badge-danger">Rare</span></td>
                                                    <td>+0 78 654 3456</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>05-10-2019</td>
                                                    <td>South Carolina</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="text-muted num-font">#2345</span></td>
                                                    <td>Jason Bond</td>
                                                    <td>Male</td>
                                                    <td><span class="badge badge-pill badge-info">Unusual</span></td>
                                                    <td>+1 89 675 4563</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>04-10-2019</td>
                                                    <td>Virginia</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="text-muted num-font">#9876</span></td>
                                                    <td>Victoria Cornish</td>
                                                    <td>Female</td>
                                                    <td><span class="badge badge-pill badge-success">Rare</span></td>
                                                    <td>+0 67 345 9876</td>
                                                    <td><i class="mdi mdi-av-timer text-muted mr-1 num-font"></i>03-10-2019</td>
                                                    <td>Washington</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Product List</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Cost</th>
                                                    <th>Sales Amount</th>
                                                    <th>Shipping Cost</th>
                                                    <th>Profit Generated</th>
                                                    <th>Left in Stock</th>
                                                    <th>Returns</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>T-shirts</td>
                                                    <td>425</td>
                                                    <td>550</td>
                                                    <td>80</td>
                                                    <td>86</td>
                                                    <td>1,567</td>
                                                    <td>120</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Baseball Hat</td>
                                                    <td>530</td>
                                                    <td>600</td>
                                                    <td>50</td>
                                                    <td>78</td>
                                                    <td>895</td>
                                                    <td>300</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Tennis Racket</td>
                                                    <td>220</td>
                                                    <td>310</td>
                                                    <td>67</td>
                                                    <td>56</td>
                                                    <td>2,568</td>
                                                    <td>200</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Shoes</td>
                                                    <td>720</td>
                                                    <td>530</td>
                                                    <td>60</td>
                                                    <td>70</td>
                                                    <td>678</td>
                                                    <td>150</td>
                                                    <td>
                                                        <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="Edit"><i class="feather icon-edit-2"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-success mr-1" data-toggle="tooltip" title="Check"><i class="feather icon-check-square"></i></a>
                                                        <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card sale-card">
                                <div class="card-header">
                                    <h5>Orders Overview</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <div class="table-responsive">
                                            <table class="table center-aligned-table">
                                                <thead>
                                                    <tr>
                                                        <th>Order No</th>
                                                        <th>Product Name</th>
                                                        <th>Purchased Date</th>
                                                        <th>Shipping Status</th>
                                                        <th>Payment Method</th>
                                                        <th>Payment Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Q01</td>
                                                        <td>Iphone 7</td>
                                                        <td>12 Jan 2018</td>
                                                        <td>Dispatched</td>
                                                        <td>Credit card</td>
                                                        <td><label class="badge badge-success margin-0">Approved</label></td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Q02</td>
                                                        <td>Galaxy S8</td>
                                                        <td>18 Jan 2018</td>
                                                        <td>Dispatched</td>
                                                        <td>Internet banking</td>
                                                        <td><label class="badge badge-warning margin-0">Pending</label></td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Q03</td>
                                                        <td>Amazon Echo</td>
                                                        <td>22 Feb 2018</td>
                                                        <td>Dispatched</td>
                                                        <td>Credit card</td>
                                                        <td><label class="badge badge-success margin-0">Approved</label></td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Q04</td>
                                                        <td>Google Pixel</td>
                                                        <td>22 Feb 2018</td>
                                                        <td>Dispatched</td>
                                                        <td>Cash on delivery</td>
                                                        <td><label class="badge badge-danger margin-0">Rejected</label></td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Q05</td>
                                                        <td>Mac Mini</td>
                                                        <td>8 March 2018</td>
                                                        <td>Dispatched</td>
                                                        <td>Debit card</td>
                                                        <td><label class="badge badge-success margin-0">Approved</label></td>
                                                        <td>
                                                            <a href="#!" class="btn btn-icon btn-primary mr-1" data-toggle="tooltip" title="View"><i class="feather icon-eye"></i></a>
                                                            <a href="#!" class="btn btn-icon btn-danger mr-1" data-toggle="tooltip" title="Delete"><i class="feather icon-trash-2"></i></a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- Data widget end -->

                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="http://www.bootstrapmb.com/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->



    <!-- Required js -->
    <script src="assets/js/app.js"></script>

    <script>
        $(document).ready(function() {
            $('.more-user-details').popover({
                placement: 'top',
                trigger: 'hover',
                html: true,
                content: '<div><div class="media align-items-center"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle ui-w-50 mr-3" alt="Avtar image"><div class="media-body"><h4 class="mt-0 mb-1">Jacob Doe <small class="mdi mdi-checkbox-blank-circle text-success"></small><small>Active</small></h4><p class="mb-0">Jacob_Doe@example.com</p></div></div></div><div class="alert alert-warning p-2 mb-1 mt-3 rounded"><div class="media align-items-center"><h3 class="mdi mdi-bell-ring-outline alert-heading m-0"></h3><div class="media-body pl-3"><small><b class="d-block">Unpaid invoice</b></small><small>This account will be disabled starting <b>14 March 1996</b>.</small></div></div></div><div class="no-gutters text-center row pt-3"><div class="col-6"><div><i class="feather icon-pie-chart h4 text-danger"></i></div><div class="mt-2"><b class="mb-1">$9,693</b><span class="d-block">revenue</span></div></div><div class="col-6"><div><i class="feather icon-users h4 text-primary"></i></div><div class="mt-2"><b class="mb-1">2,345</b><span class="d-block">users</span></div></div></div>'
            });
        });
    </script>
    <script src="assets/js/ui/component.todo.js"></script>

</body>

</html>
